<!-- #layout name=blank -->
<style>
  .table-bordered td {
    white-space: nowrap;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div id="app">
  <div class="page-header">
    <h1 class="title">Data</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a href="javascript:;" class="btn green navbar-btn" :href="createDataUrl"
        >New data</a
      >
      <a
        v-show="selectedRows.length"
        @click="onDelete"
        class="btn red navbar-btn"
        >Delete</a
      >
      <a
        :href="columnsPageUrl"
        v-kb-tooltip:left="Kooboo.text.tooltip.columnSetting"
        class="btn btn-default navbar-btn pull-right"
        ><i class="fa fa-gear"></i
      ></a>
    </div>
  </div>
  <kb-table :data="list" show-select :selected.sync="selectedRows">
    <kb-table-column v-for="item in listKeys" :prop="item" :label="item">
    </kb-table-column>
    <kb-table-column width="100px" align="right">
      <template v-slot="row">
        <a class="btn btn-ms blue" :href="editUrl(row._id)" @click.stop=""
          >{{Kooboo.text.common.edit}}</a
        >
      </template>
    </kb-table-column>
  </kb-table>
  <kb-pager
    :page-nr="model.pageNr"
    :total-pages="model.totalPages"
    @change="getData"
  ></kb-pager>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbTable.js",
    "/_Admin/Scripts/components/kbPager.js"
  ]);
  new Vue({
    el: "#app",
    data: function() {
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.Database,
            url: Kooboo.Route.Database.TablePage
          },
          {
            name: Kooboo.getQueryString("table")
          }
        ],
        selectedRows: [],
        model: {}
      };
    },
    computed: {
      createDataUrl: function() {
        return Kooboo.Route.Get(Kooboo.Route.Database.EditDataPage, {
          table: Kooboo.getQueryString("table")
        });
      },
      columnsPageUrl: function() {
        return Kooboo.Route.Get(Kooboo.Route.Database.ColumnsPage, {
          table: Kooboo.getQueryString("table"),
          from: "Data"
        });
      },

      listKeys: function() {
        var keys = [];
        if (this.model.list) {
          this.model.list.forEach(function(item) {
            item.forEach(function(i) {
              if (i.key != "_id" && keys.indexOf(i.key) == -1) {
                keys.push(i.key);
              }
            });
          });
        }
        return keys;
      },
      list: function() {
        var items = [];
        if (this.model.list) {
          this.model.list.forEach(function(item) {
            var obj = {};
            item.forEach(function(i) {
              obj[i.key] = i.value;
            });
            items.push(obj);
          });
        }
        return items;
      }
    },
    mounted: function() {
      this.getData();
    },
    methods: {
      onDelete: function() {
        var me = this;
        if (confirm(Kooboo.text.confirm.deleteItems)) {
          var ids = me.selectedRows.map(function(o) {
            return o._id;
          });

          Kooboo.Database.deleteData({
            tableName: Kooboo.getQueryString("table"),
            values: ids
          }).then(function(res) {
            if (res.success) {
              me.getData();
              window.info.done(Kooboo.text.info.delete.success);
            }
          });
        }
      },
      editUrl: function(id) {
        return Kooboo.Route.Get(Kooboo.Route.Database.EditDataPage, {
          id: id,
          table: Kooboo.getQueryString("table")
        });
      },
      getData: function(pageNr) {
        var me = this;
        Kooboo.Database.getData({
          table: Kooboo.getQueryString("table"),
          pageNr: pageNr || 1
        }).then(function(res) {
          if (res.success) {
            me.model = res.model;
          }
        });
      }
    }
  });
</script>
